<div class="nodeInfoDetails" ng-init="nodeIcon='USER'" ng-show="showNodeInfoDetails">

    <div class="unknown-group" ng-show="node.serviceType.indexOf('_GROUP') != -1">

        <div class="search-n-order">
            <div style="display:inline-block;width:265px">
                <div class="input-group form-group input-group-sm has-feedback" style="margin-bottom:0;">
                    <span class=" input-group-addon">
                        <span class="glyphicon glyphicon-search" style="top:0;"></span>
                    </span>
                    <input type="text" class="form-control" ng-model="nodeSearch" ng-change="nodeSearchChange()" placeholder="Type keywords for filtering.">
                    <span class="glyphicon glyphicon-remove form-control-feedback" style="top:-2px;z-index:2;" ng-click="nodeSearch=''" ng-show="nodeSearch"></span>
                </div>
            </div>
            <div style="float:right">
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-default" ng-click="nodeOrderByName()">Name <span class="glyphicon" ng-class="nodeOrderByNameClass"></span></button>
                    <button type="button" class="btn btn-default" ng-click="nodeOrderByCount()">Count <span class="glyphicon" ng-class="nodeOrderByCountClass"></span></button>
                </div>
            </div>
        </div>

        <div class="unknown-list">
            <div class="panel panel-default" ng-repeat="(index, node) in unknownNodeGroup | orderBy:nodeOrderBy:nodeOrderByDesc" ng-show="showUnknownNodeBy(nodeSearch, node)" style="height:241px;">
                <div class="panel-heading">
                    {{node.applicationName}}<span class="badge pull-right" ng-class="{'alert-danger':node.hasAlert}" title="Total Call Count" data-toggle="tooltip" data-placement="left">{{node.totalCount | number}}</span>
                </div>

                <div class="panel-body summaryCharts_{{node.applicationName | applicationNameToClassName}}" style="position: relative; padding:0">
                    <div ng-show="showNodeResponseSummaryForUnknown" style="padding-top: 20px;">
                        <h6 style="position:absolute;top:5px;left:10px;margin:0;">Response Summary</h6>
                        <response-time-chart-directive namespace="forNode_{{node.applicationName | applicationNameToClassName}}"></response-time-chart-directive>
                    </div>
                    <div ng-hide="showNodeResponseSummaryForUnknown">
                        <h6 style="position:absolute;top:5px;left:10px;margin:0;">Load</h6>
                        <load-chart-directive namespace="forNode_{{node.applicationName | applicationNameToClassName}}"></load-chart-directive>
                    </div>

                    <a class="btn btn-default btn-xs" href title="Show Load" data-toggle="tooltip" data-placement="left" style="position: absolute;top: 20px; right:5px;color:#8a6d3b"
                       ng-click="showNodeResponseSummaryForUnknown=!showNodeResponseSummaryForUnknown;renderNodeLoad(node.applicationName, node.key)" ng-show="showNodeResponseSummaryForUnknown">
                        <span class="glyphicon glyphicon-stats"></span>
                    </a>
                    <a class="btn btn-default btn-xs" href title="Show Response Summary" data-toggle="tooltip" data-placement="left" style="position: absolute;top: 20px; right:5px;color:#8a6d3b"
                       ng-click="showNodeResponseSummaryForUnknown=!showNodeResponseSummaryForUnknown;renderNodeResponseSummary(node.applicationName, node.key)" ng-show="!showNodeResponseSummaryForUnknown">
                        <span class="glyphicon glyphicon-stats"></span>
                    </a>
                    <a class="btn btn-default btn-xs" href ng-click="showNodeDetailInformation(node.key)"
                       title="Show Node Information" data-toggle="tooltip" data-placement="left" style="position: absolute;top: 50px; right:5px;color:#31708f;">
                        <span class="glyphicon glyphicon-info-sign"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="known-node" ng-hide="node.serviceType.indexOf( '_GROUP' ) != -1">

        <div class='response-summary' ng-show="showNodeResponseSummary">
            <h5><span class="glyphicon glyphicon-question-sign responseSummaryChartTooltip" style="cursor:pointer;float:right;"></span> Response Summary</h5>
            <response-time-chart-directive namespace="forNode"></response-time-chart-directive>
        </div>

        <div class='load' ng-show="showNodeLoad">
            <h5><span class="glyphicon glyphicon-question-sign loadChartTooltip" style="cursor:pointer;float:right;"></span> Load</h5>
            <load-chart-directive namespace="forNode"></load-chart-directive>
        </div>
        <div ng-show="htLastUnknownNode.serviceType.indexOf( '_GROUP' ) != -1 && htLastUnknownNode">
            <button type="button" class="btn btn-default btn-xs" ng-click="goBackToUnknownNode()"><span class="glyphicon glyphicon-arrow-left"></span> Go back to Group</button>
        </div>

    </div>

</div>